// 水波纹效果
.water_ripple {
	position: relative;
	overflow: hidden;
}
.water_ripple::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 10%, transparent 10.1%);
	opacity: 0;
}
.water_ripple:hover::after {
	animation: ripple 0.25s;
}

@keyframes ripple {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	100% {
		transform: scale(10);
		opacity: 1;
	}
}
// 三个动画
@keyframes tada {
	from {
		transform: scale3d(1, 1, 1);
	}

	10%,
	20% {
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
	}

	30%,
	50%,
	70%,
	90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%,
	60%,
	80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes rubberBand {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}
@keyframes jello {
	0%,
	11.1%,
	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg);
	}

	33.3% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg);
	}

	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg);
	}

	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg);
	}

	66.6% {
		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}

	77.7% {
		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
		transform: skewX(0.390625deg) skewY(0.390625deg);
	}

	88.8% {
		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
}

@keyframes zoom {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes esay-in {
	from {
		opacity: 0;
		transform: translateX(-100rpx);
	}

	to {
		transform: translateX(0rpx);
		opacity: 1;
	}
}

@keyframes esay-out {
	from {
		opacity: 0;
		transform: translateX(100rpx);
	}

	to {
		transform: translateX(0rpx);
		opacity: 1;
	}
}

@keyframes zoom-in {
	from {
		opacity: 0;
		transform: scale(0.9);
		margin-top: 30rpx;
	}

	to {
		transform: scale(1);
		margin-top: 0rpx;
		opacity: 1;
	}
}

@keyframes translationY {
	from {
		opacity: 0;
		margin-top: 30rpx;
		// transform: translateY(30rpx);
	}

	to {
		opacity: 1;
		margin-top: 0rpx;
		// transform: translateY(0);
	}
}

// zoom
@for $i from 1 through 30 {
	.zoom#{$i} {
		animation: zoom #{calc($i / 10)}s;
	}
}
// zoom-in
@for $i from 1 through 30 {
	.zoom-in#{$i} {
		animation: zoom-in #{calc($i / 10)}s;
	}
}
// esay-in
@for $i from 1 through 30 {
	.esay-in#{$i} {
		animation: esay-in #{calc($i / 10)}s;
	}
}
// esay-out
@for $i from 1 through 30 {
	.esay-out#{$i} {
		animation: esay-out #{calc($i / 10)}s;
	}
}
// translationY
@for $i from 1 through 30 {
	.translationY#{$i} {
		animation: translationY #{calc($i / 10)}s;
	}
}
